<!-- 
 * @Description: 文件管理
 * @Author: Ayuan
 * @Date: 2025-02-18 16:16:52
-->
<template>
  <div class="table-box">
    <ProTable ref="proTable" title="文件列表" :columns="columns" :request-api="fileAPI.page">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <s-button suffix="上传文件" @click="onOpen(FormOptEnum.ADD)" />
        <s-button type="danger" plain suffix="删除文件" :opt="FormOptEnum.DELETE" :disabled="!scope.isSelected"
          @click="onDelete(scope.selectedListIds, '删除所选文件')" />
      </template>
      <!-- 操作 -->
      <template #operation="scope">
        <s-button link :opt="FormOptEnum.DOWNLOAD" @click="onDownload(scope.row)" />
        <s-button link :opt="FormOptEnum.RENAME" @click="onRename(scope.row)" />
        <s-button link :opt="FormOptEnum.DELETE" @click="onDelete([scope.row.id], `删除【${scope.row.name}】文件`)" />
      </template>
    </ProTable>
    <!-- 上传表单 -->
    <Form ref="formRef" />
    <!-- 重命名表单 -->
    <renameForm ref="renameFormRef" />
  </div>
</template>

<script setup lang="tsx" name="sysFile">
import { fileAPI } from "@/api/modules/sys/dev/file";
import { SysFile, ResultData } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { FormOptEnum } from "@/enums";
import Form from "./components/form.vue";
import renameForm from "./components/renameForm.vue";

// 获取 ProTable 元素，调用其获取刷新数据方法
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps<SysFile.SysFileInfo>[] = [
  { type: "selection", fixed: "left", width: 80 },
  { prop: "name", label: "文件名" },
  { prop: "sizeInfo", label: "文件大小" },
  { prop: "createUser", label: "创建者" },
  { prop: "createTime", label: "创建时间" },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];

// 表单引用
const formRef = ref<InstanceType<typeof Form> | null>(null);
const renameFormRef = ref<InstanceType<typeof renameForm> | null>(null);

/**
 * 打开表单
 * @param opt  操作类型
 * @param record  记录
 */
function onOpen(opt: FormOptEnum, record: {} | SysFile.SysFileInfo = {}) {
  formRef.value?.onOpen({ opt: opt, record: record, successful: RefreshTable });
}
/**
 * 重命名文件
 * @param record 文件记录
 */
async function onRename(record: SysFile.SysFileInfo) {
  renameFormRef.value?.onOpen({ opt: FormOptEnum.RENAME, record: record, successful: RefreshTable });
}

/**
 * 下载文件
 * @param record 文件记录
 */
async function onDownload(record: SysFile.SysFileInfo) {
  const res = await fileAPI.download({ id: record.id });
  const url = window.URL.createObjectURL(res);
  const link = document.createElement("a");
  link.href = url;
  link.setAttribute("download", record.name);
  document.body.appendChild(link);
  link.click();
}

/**
 * 删除文件
 * @param ids  id数组
 */
async function onDelete(ids: string[], msg: string) {
  await useHandleData(fileAPI.delete, { ids }, msg);
  RefreshTable();
}

/**
 * 刷新表格
 */
function RefreshTable() {
  proTable.value?.refresh();
}
</script>

<style lang="scss" scoped></style>
